import { echartColor } from '@/utils/study.js'

/**
 * 生成一个带颜色的圆形标记的HTML span元素
 * @param {string} color - 标记的颜色值
 * @returns {string} 包含样式的HTML span标签字符串
 */
export const getMarker = (color) => {
  return `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color}"></span>`
}
/*
// 黄色
const yellowMarker = getMarker('rgba(252,230,48,1)')
// 紫色
const purpleMarker = getMarker('rgba(92, 123, 217,1)')
//*/

// 获取最大连续正确次数 HTML
export const getMaxCorrectStreakStr = (maxCorrectStreak) => {
  // 最大连续正确次数 HTML
  let maxCorrectStreakStr = ''
  if (maxCorrectStreak != null) {
    maxCorrectStreakStr = `
		<div class="mb-2 flex justify-center">
		  <div class="w-1 mr-4"></div>
		  <div class="w-72 flex-1 flex justify-between" style="color: ${echartColor[1]}">
			<span class="mr-4 font-sans">最大连续正确:</span>
			<div class="font-sans">
			  <span></span>
			  ${maxCorrectStreak} 次
			  <span></span>
			</div>
		  </div>
		</div>
	  `
  }
  return maxCorrectStreakStr
}

// 获取最大连续错误次数 HTML
export const getMaxWrongStreakStr = (maxWrongStreak) => {
  // 最大连续错误次数 HTML
  let maxWrongStreakStr = ''
  if (maxWrongStreak != null) {
    maxWrongStreakStr = `
		<div class="mb-2 flex justify-center">
		  <div class="w-1 mr-4"></div>
		  <div class="w-72 flex-1 flex justify-between" style="color: ${echartColor[3]}">
			<span class="mr-4 font-sans">最大连续错误:</span>
			<div class="font-sans">
			  <span></span>
			  ${maxWrongStreak} 次
			  <span></span>
			</div>
		  </div>
		</div>
	  `
  }
  return maxWrongStreakStr
}

// 获取日期和号码 HTML
export const getTimeAndNumberStr = (currentMarker, time, number, color) => {
  return `
	  <div class="mb-2 flex">
		<div class="w-1 mr-4">
		  ${currentMarker}
		</div>
		<div class="w-72 flex-1 flex justify-between pt-0.5">
		  <span class="mr-4 font-sans">${time}</span>
		  <span class="font-sans" style="color: ${color};">${number}</span>
		</div>
	  </div>
	`
}

// 获取上期所选组准确性 HTML
export const getPrevGroupAccuracyStr = (color, value, accuracyValue = 10) => {
  return `
		<div class="mb-2 flex">
		  <div class="w-1 mr-4">
		  </div>
		  <div class="w-72 flex-1 flex justify-between pt-0.5">
			<span class="mr-4 font-sans">上期所选组准确性</span>
			<span class="font-sans" style="color: ${color};">${value === accuracyValue ? '√' : '×'}</span>
		  </div>
		</div>
	`
}

// 获取正确次数 HTML
export const getCorrectCountStr = (valueCount, numberKey) => {
  return `
		<div class="mb-2 flex justify-center">
		  <div class="w-1 mr-4"></div>
		  <div class="w-72 flex-1 flex justify-between" style="color: ${echartColor[1]}">
			<span class="mr-4 font-sans">正确:</span>
			<div class="font-sans">
			  <span></span>
			  ${valueCount[numberKey]}
			  <span></span>
			</div>
		  </div>
		</div>
	`
}

// 获取错误次数 HTML
export const getWrongCountStr = (valueCount, numberKey) => {
  return `
		<div class="mb-2 flex justify-center">
		  <div class="w-1 mr-4"></div>
		  <div class="w-72 flex-1 flex justify-between" style="color: ${echartColor[3]}">
			<span class="mr-4 font-sans">错误:</span>
			<div class="font-sans">
			  <span></span>
			  ${valueCount[numberKey]}
			  <span></span>
			</div>
		  </div>
		</div>
	`
}

// 获取总期数 HTML
export const getTotalCountStr = (valueCount, correctNumberKey, wrongNumberKey) => {
  return `
		<div class="mb-2 flex justify-center">
		  <div class="w-1 mr-4"></div>
		  <div class="w-72 flex-1 flex justify-between">
			<span class="mr-4 font-sans">总期:</span>
			<div class="font-sans">
			  <span></span>
			  ${valueCount[correctNumberKey] + valueCount[wrongNumberKey]}
			  <span></span>
			</div>
		  </div>
		</div>
	`
}

// 获取正确率 HTML
export const getAccuracyStr = (accuracy) => {
  return `
		<div class="mb-2 flex justify-center">
		  <div class="w-1 mr-4"></div>
		  <div class="w-72 flex-1 flex justify-between">
			<span class="mr-4 font-sans">正确率:</span>
			<div class="font-sans">
			  <span></span>
			  ${accuracy}
			  <span></span>
			</div>
		  </div>
		</div>
	`
}

// 获取上期所选组号码 HTML
export const getPrevGroupsStr = (prevAllGroupsNumber, number, color) => {
  return `
		<div class="mb-2 flex">
		  <div class="w-1 mr-4">
		  </div>
		  <div class="w-72 flex-1 flex justify-between pt-0.5">
			<span class="mr-4 font-sans">上期所选组号码 <span class="font-sans"  style="color: #fac858;">${prevAllGroupsNumber.length}个</span></span>
			<span class="font-sans">[ ${getGroupsStr(prevAllGroupsNumber, number, color)} ]</span>
		  </div>
		</div>
	`
}

// 本期所选组号码
export const getCurrentGroupsStr = (currentAllGroupsNumber, number, color, check = false) => {
  return `
		<div class="mb-2 flex">
		  <div class="w-1 mr-4">
		  </div>
		  <div class="w-72 flex-1 flex justify-between pt-0.5">
			<span class="mr-4 font-sans">本期所选组号码 <span class="font-sans"  style="color: #3ba272;">${currentAllGroupsNumber.length}个</span></span>
			<span class="font-sans">[ ${getGroupsStr(currentAllGroupsNumber, number, color, check)} ]</span>
		  </div>
		</div>
	`
}

// 获取组号 HTML
export const getGroupsStr = (arr, number, color, check = true) => {
  return arr
    .map((n) => {
      if (check && n === number) {
        // style="color: #ee6666;"
        return `<span class="ml-1 mr-1 font-mono" style="color: ${color};">${n}</span>`
      } else {
        return `<span class="ml-1 mr-1 font-mono">${n}</span>`
      }
    })
    .join('')
}

// 获取上期所选错误组号码 HTML
export const getPrevAllGroupsItemsStr = (allGroupAccuracy, number, color) => {
  return allGroupAccuracy
    .filter((element) => element.prevGroupsNumber.includes(number))
    .map((element) => {
      return `
		<div class="mb-2 flex">
		  <div class="w-1 mr-4">
		  </div>
		  <div class="w-72 flex-1 flex justify-between pt-0.5">
			<span class="mr-4 font-sans" style="color: ${element.prevGroupsNumber.includes(number) ? color : ''};">${element.groupsName}</span>
			<span class="font-sans">[ ${getGroupsStr(element.prevGroupsNumber, number, color)} ]</span>
		  </div>
		</div>
		`
    })
    .join('')
}

/**
 * 生成HTML片段
 * @param {string[]} components - 各部分的HTML字符串数组
 * @param {string} additionalHtml - 额外的HTML字符串
 * @param {string} width - 宽度样式
 * @returns {string} - 组合后的完整HTML字符串
 */
export const generateHtml = (components, width, additionalHtml = '', additionalHtml2 = '') => {
  // console.log('additionalHtml', additionalHtml)
  return `
	  <div class="flex flex-col" style="width: ${width};">
		${components.join('\n')}
		${additionalHtml ? '<div class="mb-1 ml-5 border-solid border-0 border-b border-slate-100"></div>' : ''} 
		${additionalHtml}
		${additionalHtml2 ? '<div class="mb-1 ml-5 border-solid border-0 border-b border-slate-100"></div>' : ''} 
		${additionalHtml2}
	  </div>
	`
}

// 当前次数 HTML
export const getCurrentCountStr = (count) => {
  return `
      <div class="mb-2 flex justify-center">
        <div class="w-1 mr-4"></div>
        <div class="w-72 flex-1 flex justify-between">
          <span class="mr-4 font-sans">当前次数:</span>
          <span class="font-sans">${count} 次</span>
        </div>
      </div>
	`
}

// 理论次数 HTML
export const getTheoreticalCountStr = (count) => {
  return `
  <div class="mb-2 flex justify-center">
    <div class="w-1 mr-4"></div>
    <div class="w-72 flex-1 flex justify-between">
      <span class="mr-4 font-sans">理论次数:</span>
      <span class="font-sans">${count} 次</span>
    </div>
  </div>
	`
}

// 当前概率 HTML
export const getCurrentProbabilityStr = (probability) => {
  return `
    <div class="mb-2 flex justify-center">
      <div class="w-1 mr-4"></div>
      <div class="w-72 flex-1 flex justify-between">
        <span class="mr-4 font-sans">当前概率:</span>
        <span class="font-sans">${probability}</span>
      </div>
    </div>
	`
}

// 理论概率 HTML
export const getTheoreticalProbabilityStr = (probability) => {
  return `
    <div class="mb-2 flex justify-center">
      <div class="w-1 mr-4"></div>
      <div class="w-72 flex-1 flex justify-between">
        <span class="mr-4 font-sans">理论概率:</span>
        <span class="font-sans">${probability}</span>
      </div>
    </div>
	`
}

// 前几期 HTML
export const getPrevPeriodStr = (selectValue, recentValues, number) => {
  const recentValuesStr = recentValues.map(n => {
    if (Number(n) === Number(number)) {
      return `<span class="ml-1 mr-1 font-mono" style="color: #ee6666;">${n}</span>`
    } else {
      return `<span class="ml-1 mr-1 font-mono">${n}</span>`
    }
  }).join('')
  return `
      <div class="mb-2 flex justify-center">
        <div class="w-1 mr-4"></div>
        <div class="w-72 flex-1 flex justify-between">
          <span class="mr-4 font-sans">前${selectValue}期:</span>
          <div class="font-sans">
            <span>[</span>
            ${recentValuesStr}
            <span>]</span>
          </div>
        </div>
      </div>
	`
}

// 时间和出现次数 HTML
export const getTimeAndCountStr = (redMarker, item, totalLength) => {
  return `
    <div class="mb-2 flex">
      <div class="w-1 mr-4">
        ${redMarker}
      </div>
      <div class="w-72 flex-1 flex justify-between pt-0.5">
        <span class="mr-4 font-sans">${item.axisValue}</span>
        <span class="font-sans">${item.value}/${totalLength}</span>
      </div>
    </div>
  `
}

// 当前组别 HTML
export const getCurrentGroupStr = (numbers) => {
  const groupNumberStr = numbers
    .map((n) => {
      return `<span class="ml-1 mr-1 font-mono">${n}</span>`
    })
    .join('')
  return `
    <div class="mb-2 flex justify-center">
      <div class="w-1 mr-4"></div>
      <div class="w-72 flex-1 flex justify-between">
        <span class="mr-4 font-sans">当前组别:</span>
        <div class="font-sans">
          <span>[</span>
          ${groupNumberStr}
          <span>]</span>
        </div>
      </div>
    </div>
  `
}

// 指标 HTML
export const getMetricsStr = (metrics, options) => {
  return `


    <div class="mb-2 flex justify-center">
      <div class="w-1 mr-4"></div>
      <div class="w-72 flex-1 flex justify-between">
        <span class="mr-4 font-sans">平均连续${options.successName}次数:</span>
        <span class="font-sans" style="color: ${echartColor[1]}">${metrics.averageConsecutiveCorrects} 次</span>
      </div>
    </div>

    <div class="mb-2 flex justify-center">
      <div class="w-1 mr-4"></div>
      <div class="w-72 flex-1 flex justify-between">
        <span class="mr-4 font-sans">平均连续${options.errorName}次数:</span>
        <span class="font-sans" style="color: ${echartColor[3]}">${metrics.averageConsecutiveErrors} 次</span>
      </div>
    </div>


	<div class="mb-2 flex justify-center">
      <div class="w-1 mr-4"></div>
      <div class="w-72 flex-1 flex justify-between">
        <span class="mr-4 font-sans">总${options.successName}段数:</span>
        <span class="font-sans" style="color: ${echartColor[1]}">${metrics.totalCorrectStreaks} 次</span>
      </div>
    </div>

	<div class="mb-2 flex justify-center">
      <div class="w-1 mr-4"></div>
      <div class="w-72 flex-1 flex justify-between">
        <span class="mr-4 font-sans">总${options.errorName}段数:</span>
        <span class="font-sans" style="color: ${echartColor[3]}">${metrics.totalErrorStreaks} 次</span>
      </div>
    </div>
    
	<div class="mb-2 flex justify-center">
      <div class="w-1 mr-4"></div>
      <div class="w-72 flex-1 flex justify-between" style="color: ${metrics.currentStreakTypeBoolean ? echartColor[1] : echartColor[3]}">
        <span class="mr-4 font-sans">当前连续${metrics.currentStreakType}长度:</span>
        <span class="font-sans">${metrics.currentStreakLength} 次</span>
      </div>
    </div>
    

	<div class="mb-2 flex justify-center" style="display: ${metrics.currentStreakType === options.successName ? 'flex' : 'none'};">
      <div class="w-1 mr-4"></div>
      <div class="w-72 flex-1 flex justify-between">
        <span class="mr-4 font-sans">当前连续${options.successName}与平均${options.successName}前${options.errorName}对比:</span>
        <span class="font-sans">${metrics.streakComparisonToAverageConsecutiveCorrects} 次</span>
      </div>
    </div>
	
	<div class="mb-2 flex justify-center" style="display: ${metrics.currentStreakType === options.errorName ? 'flex' : 'none'};">
      <div class="w-1 mr-4"></div>
      <div class="w-72 flex-1 flex justify-between">
        <span class="mr-4 font-sans">当前连续${options.errorName}与平均${options.errorName}前${options.successName}对比:</span>
        <span class="font-sans">${metrics.streakComparisonToAverageConsecutiveErrors} 次</span>
      </div>
    </div>
  `
}
